*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl,li{list-style-type:none}
html,body{*position:static}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{overflow: visible;vertical-align:middle;outline:none}
body,th,td,button,input,select,textarea{font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
body{line-height:1.6;font-size:14px;}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
a{text-decoration:none;cursor: pointer}
a:hover{text-decoration:none;outline:none}
a:focus{outline:none}
a:hover,a:active{outline:none}:focus{outline:none}
sub,sup{vertical-align:baseline}
button,input[type="button"], input[type="submit"] {line-height:normal !important}
/*img*/
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
.img-responsive{max-width: 100%;height: auto}

/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
legend small{font-size:15px;color:#999}
svg:not(:root) {overflow: hidden}
fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}

/*====================== 补充常用CSS ========================*/
/* 1 溢出隐藏 */
.text-overflow{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}

/* 2 浮动*/
.f-l{float:left!important;_display:inline}
.f-r{float:right!important;_display:inline}
.cl,.clearfix{zoom:1}
.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}

/* 3 position */
.pos-r{position:relative}
.pos-a{position:absolute}
.pos-f{position:fixed}

.left{ left:0; right:auto}
.right{ right:0; left:auto}
.top{ top:0; bottom:auto}
.bottom{ bottom:0; top:auto}

/* 4 margin */
.mt-0{margin-top:0}
.mt-5{margin-top:5px}
.mt-10{margin-top:10px}
.mt-15{margin-top:15px}
.mt-20{margin-top:20px}
.mt-25{margin-top:25px}
.mt-30{margin-top:30px}
.mt-35{margin-top:35px}
.mt-40{margin-top:40px}
.mt-50{margin-top:50px}

.mb-0{margin-bottom:0}
.mb-5{margin-bottom:5px}
.mb-10{margin-bottom:10px}
.mb-15{margin-bottom:15px}
.mb-20{margin-bottom:20px}
.mb-25{margin-bottom:25px}
.mb-30{margin-bottom:30px}
.mb-35{margin-bottom:35px}
.mb-40{margin-bottom:40px}
.mb-50{margin-bottom:50px}

.ml-0{margin-left:0}
.ml-5{margin-left:5px}
.ml-10{margin-left:10px}
.ml-15{margin-left:15px}
.ml-20{margin-left:20px}
.ml-25{margin-left:25px}
.ml-30{margin-left:30px}
.ml-40{margin-left:40px}
.ml-50{margin-left:50px}

.mr-0{margin-right:0}
.mr-5{margin-right:5px}
.mr-10{margin-right:10px}
.mr-15{margin-right:15px}
.mr-20{margin-right:20px}
.mr-25{margin-right:25px}
.mr-30{margin-right:30px}
.mr-40{margin-right:40px}
.mr-50{margin-right:50px}

/* 5 padding */
.pt-0{padding-top:0}
.pt-5{padding-top:5px}
.pt-10{padding-top:10px}
.pt-15{padding-top:15px}
.pt-20{padding-top:20px}
.pt-25{padding-top:25px}
.pt-30{padding-top:30px}

.pb-0{padding-bottom:0}
.pb-5{padding-bottom:5px}
.pb-10{padding-bottom:10px}
.pb-15{padding-bottom:15px}
.pb-20{padding-bottom:20px}
.pb-25{padding-bottom:25px}
.pb-30{padding-bottom:30px}

.pl-0{padding-left:0}
.pl-5{padding-left:5px}
.pl-10{padding-left:10px}
.pl-15{padding-left:15px}
.pl-20{padding-left:20px}
.pl-25{padding-left:25px}
.pl-30{padding-left:30px}

.pr-0{padding-right:0}
.pr-5{padding-right:5px}
.pr-10{padding-right:10px}
.pr-15{padding-right:15px}
.pr-20{padding-right:20px}
.pr-25{padding-right:25px}
.pr-30{padding-right:30px}

.pd-0{padding:0}
.pd-5{padding:5px}
.pd-10{padding:10px}
.pd-15{padding:15px}
.pd-20{padding:20px}
.pd-25{padding:25px}
.pd-30{padding:30px}

/* 6 边框*/
.bk-gray{border:solid 1px #ddd}
.bd-b{border-bottom:1px solid #ccc}
.radius{border-radius:4px;}
.size-MINI.radius{ border-radius:3px}
.size-L.radius{ border-radius:5px}
.size-XL.radius{ border-radius:6px}
.round{border-radius:1000px; overflow:hidden}
.circle{ border-radius:50%; overflow:hidden}
.of-h{overflow:hidden}
.of-v{overflow:visible}

/* 7 文字大小 */
.f-12{font-size:12px}
.f-14{font-size:14px}
.f-16{font-size:16px}
.f-18{font-size:18px}
.f-20{font-size:20px}
.f-24{font-size:24px}
.f-26{font-size:26px}
.f-28{font-size:28px}
.f-30{font-size:30px}

/* 8 行高 */
.lh-16{line-height:16px}
.lh-18{line-height:18px}
.lh-20{line-height:20px}
.lh-22{line-height:22px}
.lh-24{line-height:24px}
.lh-26{line-height:26px}
.lh-28{line-height:28px}
.lh-30{line-height:30px}

/* =======9 文字颜色=========== */
/*主要颜色*/
.c-primary,.c-primary a,a.c-primary{color:#5a98de}
.c-primary a:hover,a.c-primary:hover{ color:#5a98de}
 
/*次主色*/
.c-secondary,.c-secondary a,a.c-secondary{color:#555}
.c-secondary a:hover,a.c-secondary:hover{ color:#555}
 
/*强调色—成功*/
.c-success,.c-success a,a.c-success{color:#5eb95e}
.c-success a:hover,a.c-success:hover{ color:#5eb95e}
 
/*强调色—危险*/
.c-danger,.c-danger a,a.c-danger{color:#dd514c}
.c-danger a:hover,a.c-danger:hover{ color:#dd514c}
 
/*强调色—警告*/
.c-warning,.c-warning a,a.c-warning{color:#f37b1d}
.c-warning a:hover,a.c-warning:hover{ color:#f37b1d}
 
/*强调色—错误*/
.c-error,.c-error a,a.c-error{color:#c00}
.c-error a:hover,a.c-error:hover{ color:#c00}
 
/*辅助色—浅黑*/
.c-333,.c-333 a,a.c-333{color:#333}
.c-333 a:hover,a.c-333:hover{ color:#333}
 
/*辅助色—灰色*/
.c-666,.c-666 a,a.c-666{color:#666}
.c-666 a:hover,a.c-666:hover{ color:#666}
.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{color:#999}
 
/*标准色—红色*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{ color:red}
 
/*标准色—绿色*/
.c-green,.c-green a,a.c-green{color:green}
.c-red a:hover,a.c-red:hover{color:green}
 
/*标准色—蓝色*/
.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{color:blue}
 
/*标准色—白色*/
.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{color:white}
 
/*标准色—黑色*/
.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{color:black}
 
/*标准色—橙色*/
.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{color:orange}

/* ============= 背景色 ==============*/
.gray-bg {background-color: #f0f3f4;}
.white-bg {background-color: #ffffff;}
.navy-bg {background-color: #23b7e5;color: #ffffff;}
.blue-bg {background-color: #1c84c6;color: #ffffff;}
.lazur-bg {background-color: #23c6c8;color: #ffffff;}
a.b-333:hover,button.b-333:hover,label.b-333:hover{background-color:#666666;color:white}
a.b-666:hover,button.b-666:hover,label.b-666:hover{background-color:#333333;color:white;}
.b-333{background-color:#333333;}
.b-666{background-color:#666666;}

/* 10 隐藏 显示*/
.hide{display:none}
[hidden]{display: none}
.hidden{display:none!important;visibility:hidden!important}
.f-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}
.show{display:block}
.invisible{visibility:hidden}

/* 11 标题 */
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:normal;line-height:1;color:#999}
h1,h2,h3{margin-top:20px;margin-bottom:10px}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}

/* 12 对齐 */
.text-l{text-align:left}
.text-r{text-align:right}
.text-c{text-align:center}
.va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
.va-t{ vertical-align:top!important}/*上下居顶*/
.va-m{ vertical-align:middle!important}/*上下居中*/
.va-b{ vertical-align:bottom!important}/*上下居底*/

/* =================== HUI补充 ==========================*/
.left0{ left:0; right:auto}
.right0{ right:0; left:auto}
.top0{ top:0; bottom:auto}
.bottom0{ bottom:0; top:auto}
.left50{ left:50%;}
.top50{ top:50%;}

.pd-0{padding: 0 !important;}

/* flex */
.flex{display: flex;}
.s-b{-webkit-justify-content:space-between;justify-content: space-between;}
.s-a{-webkit-justify-content: space-around;justify-content: space-around;}
.ai-c{align-items:center;}

/* 居中 bootstrap 也有,后面两个同时只能用一个*/
.center-block{display:block;margin-left:auto;margin-right:auto;}
.center-float-father{float: left;position: relative;left: 50%;}
.center-float{float: left;position: relative;left: -50%;}

.pos-center{position:absolute;left:50%;transform: translateX(-50%)}
.pos-middle{position:absolute;top:50%;transform: translateY(-50%)}
.text-c th{text-align:center;}


/* 布局.左右 */
/*.layout-option{}*/
/*.layout-left{float:left;width:300px;height:100%}*/
/*.layout-right{margin-left:300px;height:100%;}*/


/* 最后 字体间距 */
/*
属性 属性含义 属性值
Word-spacing 定义了各个单词之间的间距 Normal<length>必须以长度为单位
Letter-spacing 定义了每个字母之间的间距 同上
Text-decoration 定义文字的“装饰”样式 None|underline|overline|line-through|blink
text-transform 使文本转换为其它形式 Capitalize|uppercase|lowercase|none

*/
html{height: 100%;margin: 12px 12px;background: #ddd;}
body{height: 100%;}